<template>
	<view class="information-list" v-if="list.length > 0">
		<navigator :url="'/pages/news/detail?id=' + item.id" class="item" v-for="(item, index) in list" :key="index" hover-class="none">
			<view  class="item-view"><view  class="item">
			<view  class="item-l">
			<view  class="item-l-title">{{ item.title }}</view>
			<view  class="item-abstract">
			<view   class="wxParse" style="user-select: text;">{{ item.introduce }}</view>
			</view><view  class="item-l-user">
			<view  class="item-l-user-name">{{ item.author }}</view><view  class="item-l-user-time">{{ item.createTime }}</view></view></view><view  class="item-r"><view  class="item-l-view">
			<view   class="image-wrap item-l-view-img cms-image" style="border-radius: 4px; width: 111px; height: 85px;"><!---->
			
			<image :src="item.thumb" mode="aspectFill" class="default-image" style="border-radius: 4px; width: 111px; height: 85px;"></image>
			</view></view></view></view><!----></view>
			<view class="line"></view>
		</navigator>
	</view>
</template>

<script>
export default {
	name: 'articleList',
	props: {
		list: {
			type: Array,
			default: function(e) {
				return [];
			}
		}
	},
	filters: {
		timeFormat(val){
			if(val && val.length > 10){
				val = val.substr(0,10)
			}
			return val;
		}
	}
};

</script>

<style lang="scss">
/*文章列表*/
.information-list.first-padding .item-view:first-child {
 padding-top:0
}
.information-list .item-view {
 padding:15px;
 background:#fff;
 position:relative
}
.information-list .item-view::after {
 position:absolute;
 content:"";
 box-sizing:border-box;
 pointer-events:none;
 right:0;
 left:0;
 -webkit-transform:scaleY(.5);
 transform:scaleY(.5);
 border-bottom:1px solid #f5f5f5;
 bottom:0
}
@media (-webkit-min-device-pixel-radio:3),(min-device-pixel-radio:3) {
 .information-list .item-view::after {
  -webkit-transform:scaleY(.33333);
  transform:scaleY(.33333)
 }
}
@media (-webkit-min-device-pixel-radio:2),(min-device-pixel-radio:2) {
 .information-list .item-view::after {
  -webkit-transform:scaleY(.5);
  transform:scaleY(.5)
 }
}
.information-list .item-view:last-child::after {
 border-bottom:0
}
.information-list .item-view .item {
 display:-webkit-box;
 display:-webkit-flex;
 display:flex
}
.information-list .item-view .item .item-l {
 -webkit-box-flex:1;
 -webkit-flex:1;
 flex:1;
 display:-webkit-box;
 display:-webkit-flex;
 display:flex;
 -webkit-box-orient:vertical;
 -webkit-box-direction:normal;
 -webkit-flex-direction:column;
 flex-direction:column;
 -webkit-box-pack:justify;
 -webkit-justify-content:space-between;
 justify-content:space-between
}
.information-list .item-view .item .item-l .item-l-title {
 font-size:16px;
 font-weight:600;
 color:#333;
 line-height:24px;
 max-height:48px;
 display:-webkit-box;
 overflow:hidden;
 word-break:break-all;
 text-overflow:ellipsis;
 -webkit-line-clamp:2;
 -webkit-box-orient:vertical
}
.information-list .item-view .item .item-l .item-l-title .item-l-title-tag {
 display:inline-block;
 vertical-align:2px
}
.information-list .item-view .item .item-l .item-l-user {
 display:-webkit-box;
 display:-webkit-flex;
 display:flex;
 -webkit-box-align:center;
 -webkit-align-items:center;
 align-items:center;
 font-size:12px
}
.information-list .item-view .item .item-l .item-l-user .item-l-user-name {
 max-width:140px;
 margin-right:10px;
 color:#dde3ef;
 overflow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis;
 line-height:22px
}
.information-list .item-view .item .item-l .item-l-user .item-l-user-time {
 color:#ccc;
 -webkit-flex-shrink:0;
 flex-shrink:0
}
.information-list .item-view .item .item-l .item-abstract {
 margin:5px 0;
 line-height:19px;
 max-height:38px;
 display:-webkit-box;
 overflow:hidden;
 word-break:break-all;
 text-overflow:ellipsis;
 -webkit-line-clamp:2;
 -webkit-box-orient:vertical
}
.information-list .item-view .item .item-l .item-abstract .wxParse {
 color:#999;
 font-size:12px;
 line-height:19px
}
.information-list .item-view .item .item-r {
 margin-left:14px
}
.information-list .item-view .item .l-item-r {
 margin-right:14px
}
.information-list .item-view .item .item-r .item-l-view,
.information-list .item-view .item .l-item-r .item-l-view {
 width:104px;
 height:80px;
 background:#f9f9f9;
 border-radius:4px
}
.information-list .item-view .item .item-r .item-l-view .item-l-view-img,
.information-list .item-view .item .l-item-r .item-l-view .item-l-view-img {
 width:104px;
 height:80px;
 border-radius:4px
}
.information-list .item-view .item .item-r .item-l-view .item-l-view-noImg,
.information-list .item-view .item .l-item-r .item-l-view .item-l-view-noImg {
 width:100%;
 height:100%;
 display:-webkit-box;
 display:-webkit-flex;
 display:flex;
 -webkit-box-orient:vertical;
 -webkit-box-direction:normal;
 -webkit-flex-direction:column;
 flex-direction:column;
 -webkit-box-pack:center;
 -webkit-justify-content:center;
 justify-content:center;
 -webkit-box-align:center;
 -webkit-align-items:center;
 align-items:center;
 font-weight:400;
 font-size:12px;
 color:#dde3ef;
 border-radius:4px
}
.information-list .item-view .list-item-content-tujis {
 display:-webkit-box;
 display:-webkit-flex;
 display:flex;
 -webkit-flex-wrap:wrap;
 flex-wrap:wrap
}
.information-list .item-view .list-item-content-tujis .list-item-content-tujis-item {
 margin-top:17px;
 margin-right:17px
}
.information-list .item-view .list-item-content-tujis .list-item-content-tujis-item:nth-child(3n) {
 margin-right:0
}
.information-list .item-view .list-item-content-tujis .list-item-content-tujis-item:nth-child(1),
.information-list .item-view .list-item-content-tujis .list-item-content-tujis-item:nth-child(2),
.information-list .item-view .list-item-content-tujis .list-item-content-tujis-item:nth-child(3) {
 margin-top:0
}
</style>
